<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜效果</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
  <style>
    .layer {
      pointer-events: none;
    }
    .tab-head a.active {
      padding-bottom: 22px;
      border-bottom: 2px solid #27ba9b;
    }
  </style>
</head>

<body>
      <!-- 商品信息 -->
      <div class="xtx-product-info">
        <div class="left">
          <div class="pictrue">
            <div class="middle">
              <img src="./images/1.jpg" alt="">
              <div class="layer"></div>
            </div>
            <div class="small">
              <ul>
                <li class="active"><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/3.jpg" alt=""></li>
                <li><img src="./images/4.jpg" alt=""></li>
                <li><img src="./images/5.jpg" alt=""></li>
              </ul>
            </div>
            <div class="large"></div>
          </div>
        </div>
      </div>

  <script>
    // 三个图的故事
    (function () {
      //1. 小盒子 中盒子 大盒子 约定.
      const small = document.querySelector('.pictrue .small')
      const middle = document.querySelector('.pictrue .middle')
      const large = document.querySelector('.pictrue .large')

      //1. 鼠标移入到小图片，在中盒子中显示对应的图片.
      //   事件委托.
      small.addEventListener('mouseover', function (e) {
        if (e.target.tagName == 'IMG') {
          middle.children[0].src = e.target.src;
          //排它.
          const active = small.querySelector('ul li.active')
          active.classList.remove('active')
          e.target.parentNode.classList.add('active')
        }
      })

      let timerId = 0
      //2. 鼠标移入中盒子，显示大盒子.
      const layer = middle.children[1]
      middle.addEventListener('mouseenter', function () {
        //1.显示大盒子
        clearTimeout(timerId);
        large.style.backgroundImage = `url("${middle.children[0].src}")`
        large.style.display = 'block'
        //显示遮罩层
        layer.style.display = 'block'
      })


      //3. 鼠标离开中盒子，300毫秒后，大盒子隐藏.
      middle.addEventListener('mouseleave', function () {
        timerId = setTimeout(function () {
          large.style.display = 'none'
        }, 300)
        //显示遮罩层
        layer.style.display = 'none'
      })


      //鼠标进入大盒子。计时器停止.
      large.addEventListener('mouseenter', function () {
        clearTimeout(timerId)
      })

      //鼠标离开大盒子。计时器开始
      large.addEventListener('mouseleave', function () {
        timerId = setTimeout(function () {
          large.style.display = 'none'
        }, 300)
      })

      middle.addEventListener('mousemove', function (e) {
        // 鼠标在黑色遮罩的中间位置
        let x = e.offsetX - layer.offsetWidth / 2
        let y = e.offsetY - layer.offsetHeight / 2
        // 限定黑色遮罩盒子在中间位置不移动出去
        const maxX = middle.offsetWidth - layer.offsetWidth
        const maxY = middle.offsetHeight - layer.offsetHeight
        x = x < 0 ? 0 : x
        x = x > maxX ? maxX : x
        y = y < 0 ? 0 : y
        y = y > maxY ? maxY : y
        // 让黑色遮罩盒子移动
        layer.style.top = y + 'px'
        layer.style.left = x + 'px'
        //  大盒子图片移动
        large.style.backgroundPosition = `${-2 * x}px ${-2 * y}px`

      })

    })();

    //3. 点击颜色添加变量
    (function () {
      const dd = document.querySelector('.item #color')
      dd.addEventListener('click', function (e) {
        if (e.target.tagName == 'IMG') {
          const active = document.querySelector('.item  #color img.active')
          if (active) active.classList.remove('active')
          e.target.classList.add('active')
        }
      })
    })();
  </script>
</body>

</html>